<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder title="我的客户" :autoBack="true"></up-navbar>
		<zjy-search placeholder="搜索产品名称" />
		<zjy-filters :data="filterData" @close="filterClose" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view v-for="(item, index) in listData" :key="index" class="pb-16">
					<view class="zjy-card-form">
						<view class="space-between">
							<view class="flex">
								<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
								<view class="ml-16">
									<view class="fs-28">小乖吃喝玩乐记</view>
									<view class="fs-20 c-grey-86 mt-8">11-01 14:57:18</view>
								</view>
							</view>
							<view class="fs-28 c-brown-bc">正常</view>
						</view>
						<view class="total-content">
							<view class="total-item">
								<view class="title">累计成交</view>
								<view class="value">
									<text class="fs-20">&yen;</text>
									<text>13,498</text>
								</view>
							</view>
							<view class="total-item">
								<view class="title">累计订单</view>
								<view class="value">32</view>
							</view>
							<view class="total-item">
								<view class="title">累计佣金</view>
								<view class="value">
									<text class="fs-20">&yen;</text>
									<text>13,498</text>
								</view>
							</view>
						</view>
						<view class="c-grey-86 mt-16">最近成交日期：暂无交易</view>
					</view>
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
import zjyFilters from "@/components/zjy-filters/index.vue"
import { CommissionStatus } from "@/components/zjy-filters/constant"
import useCommonStore from "@/store/common"
import { freshLoading } from "@/utils/fresh-loading"
import { onLoad } from "@dcloudio/uni-app"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 264rpx)`
const searched = ref(false)
const search = () => {}

//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
freshLoadingRef.listData.value.push(...[1, 2])
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	console.log(data)
}
const initFilter = async () => {
	filterData.value = [
		{
			title: "全部日期",
			key: "date",
			type: "date",
		},
		{
			title: "客户状态",
			key: "status",
			type: "single",
			value: CommissionStatus[0].id,
			data: CommissionStatus,
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
})
</script>
<style lang="scss" scoped>
.user-avatar {
	width: 72rpx;
	height: 72rpx;
}
.total-content {
	border-radius: 0 16rpx 16rpx 16rpx;
	background: #f6f6f9;
	margin-top: 28rpx;
	padding: 24rpx;
	display: flex;
	.total-item {
		flex: 1;
		text-align: center;
		.title {
			color: $c-grey-86;
		}
		.value {
			margin-top: 4rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}
</style>
